<template>
  <div
    id="container"
    style="position: relative; background-color: bisque"
  ></div>
</template>
<script>
import G6 from "@antv/g6";
import methods from "./util/methods";
import rawData from "./util/data"


export default {
  name: "G6Dom",
  data() {
    return {
      graph: null,
      //to ：就是相互关联的数据
      datas: rawData,
    };
  },
  watch: {
    datas() {
      if (this.graph) {
        this.graph.data(this.dataTransform(this.datas));
        this.graph.render();
      }
    },
  },
  mounted() {
    this.init();

    if (document.getElementById("container")) {
      const container = document.getElementById("container");

      const width = container.scrollWidth;
      const height = (container.scrollHeight || 500) - 20;
      const graph = new G6.Graph({
        container: "container",
        width,
        height,
        defaultNode: {
          size: [300, 400],
          type: "dice-er-box",
          color: "#5B8FF9",
          style: {
            fill: "#9EC9FF",
            lineWidth: 3,
          },
          labelCfg: {
            style: {
              fill: "black",
              fontSize: 20,
            },
          },
        },
        defaultEdge: {
          type: "dice-er-edge",
          style: {
            stroke: "#e2e2e2",
            lineWidth: 4,
            endArrow: true,
          },
        },
        modes: {
          default: [
            "dice-er-scroll",
            "drag-node",
            "drag-canvas",
            "drag-combo",
            // {
            //   type: 'tooltip',
            //   formatText(model) {
            //     return model.label;
            //   },
            //   offset: 15
            // }
          ],
        },
        layout: {
          type: "dagre",
          rankdir: "LR",
          align: "UL",
          controlPoints: true,
          nodesepFunc: () => 0.2,
          ranksepFunc: () => 0.5,
          center: [0, 300],
        },
        fitCenter: true, // 平移图到中心将对齐到画布中心，但不缩放。
        animate: true,
      });

      graph.data(this.dataTransform(this.datas));
      graph.render();
      this.graph = graph;
    }
  },
  methods: {
    ...methods,
    dataTransform(data) {
      const nodes = [];
      const edges = [];

      data.map((node) => {
        // 表与表关联
        if (node.to) {
          node.to.forEach((item) => {
            if (item.tableId) {
              edges.push({
                source: node.tableId,
                target: item.tableId,
              });
            }
          });
        }

        const attrsArr = [];
        if (node.children) {
          node.children.forEach((attr) => {
            const { fieldId, name } = attr;
            attrsArr.push({
              key: fieldId,
              type: name,
            });

            if (attr.to) {
              attr.to.forEach((relation) => {
                edges.push({
                  source: node.tableId,
                  target: relation.tableId,
                  sourceKey: attr.fieldId,
                  targetKey: relation.fieldId,
                });
              });
            }
          });
        }

        const { tableId, tableName } = node;
        nodes.push({
          id: tableId,
          label: tableName,
          attrs: attrsArr,
        });
      });
      return {
        nodes,
        edges,
      };
    },
    // 放大
    onZoomIn() {
      this.graph.zoom(1.2);
      this.graph.emit("afterrender");
    },
    // 缩小
    onZoomOut() {
      this.graph.zoom(0.8);
      this.graph.emit("afterrender");
    },
    onLayout() {
      // 更新布局
      const grid = {
        type: "grid",
        begin: [0, 20],
        preventOverlap: true, // 防止重叠
      };
      // const dagre = {
      //   type: 'dagre',
      //   rankdir: 'LR',
      //   align: 'UL',
      //   controlPoints: true,
      //   nodesepFunc: () => 0.2,
      //   ranksepFunc: () => 0.5,
      // }
      this.graph.updateLayout(grid);
    },
  },
};
</script>

<style lang="less" scoped>
#container {
  width: 100%;
  height: 100%;
}

.toolbar_box {
  padding: 10px 0 10px 18px;
  i {
    cursor: pointer;
    margin: 0 10px 0 0;
    color: #409dfe;
  }
}

/deep/.g6-tooltip {
  padding: 5px;
  color: #444;
  background-color: rgba(255, 255, 255, 0.9);
  border: 1px solid #ccc;
  border-radius: 4px;
}
</style>